<template>
  <button 
    class="button-widget" 
    :class="buttonClass"
    :style="buttonStyle"
    @click="handleClick"
  >
    {{ text }}
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: '按钮'
  },
  type: {
    type: String,
    default: 'primary'
  },
  size: {
    type: String,
    default: 'default'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const buttonClass = computed(() => [
  `button-${props.type}`,
  `button-${props.size}`,
  {
    'button-disabled': props.disabled,
    'button-round': props.round
  }
])

const buttonStyle = computed(() => ({
  borderRadius: props.round ? '20px' : '4px'
}))

const handleClick = (event) => {
  if (props.disabled) return
  emit('click', event)
}
</script>

<style scoped>
.button-widget {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.button-widget:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 类型样式 */
.button-primary {
  background-color: #409eff;
  color: white;
}

.button-primary:hover:not(:disabled) {
  background-color: #66b1ff;
}

.button-success {
  background-color: #67c23a;
  color: white;
}

.button-success:hover:not(:disabled) {
  background-color: #85ce61;
}

.button-warning {
  background-color: #e6a23c;
  color: white;
}

.button-warning:hover:not(:disabled) {
  background-color: #ebb563;
}

.button-danger {
  background-color: #f56c6c;
  color: white;
}

.button-danger:hover:not(:disabled) {
  background-color: #f78989;
}

.button-info {
  background-color: #909399;
  color: white;
}

.button-info:hover:not(:disabled) {
  background-color: #a6a9ad;
}

/* 尺寸样式 */
.button-small {
  padding: 8px 15px; /* 恢复原来的内边距 */
  font-size: 12px;
}

.button-default {
  padding: 10px 20px; /* 恢复原来的内边距 */
  font-size: 14px;
}

.button-large {
  padding: 12px 25px; /* 恢复原来的内边距 */
  font-size: 16px;
}

/* 圆角样式 */
.button-round {
  border-radius: 20px;
}
</style> 